<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>vue列表渲染</title>
	<script type="text/javascript" src="vue.js"></script>
</head>

<body>
	<div id="app">
        <h1>v-for列表渲染</h1>
        <ul>
            <!--
                v-for vue提供的指令 用于便利一个可便利的元素
                (item,index) item:数组中每给元素，index为下标
                :key 为每一行数据指定唯一的标识
            -->
          <li v-for="(item,index) in hobby":key="index">{{item}}</li>
          
 
	</div>


</body>
<script>
	//vue是一个类 使用的是Vue的实例
	const vm = new Vue({
		el: "#app",
		data() {
			return {
                hobby: ["抽烟","喝酒","打麻将","烫头"]
            }
        },
        methods:{
            decrement(){
            }
        },
        computed:{
            /*
            在computed中声明的全部是计算属性依赖data中已有的一个属性 
            计算得到的一个新的结果称为计算属性家
            */
            reverseStr()/*申明了一个计算属性叫做reverseStr*/{
                /*计算属性一定要有一个返回结果*/
                /*访问data中的属性必须通过this*/
                return this.str.toUpperCase().split("").reverse().join("")
            }
        }
	})
</script>

</html>